import type { FormInstance } from 'element-plus'
import type { SystemParamOptionsType, SystemParamDataItemType } from './typings'
import { defineComponent, ref, reactive } from 'vue'
import { useStore } from 'vuex'
import {
  ElDialog,
  ElForm,
  ElRow,
  ElCol,
  ElFormItem,
  ElInput,
  ElButton,
  ElMessage,
  ElIcon
} from 'element-plus'
import { EditPen } from '@element-plus/icons-vue'
import { GUTTER, SPAN_STYLE_DOUBLE } from '~/utils/const'

export default defineComponent({
  name: 'SystemParamOptions',
  props: ['visible', 'type', 'record'],
  emits: ['cancel'],
  setup(props: SystemParamOptionsType, { emit }) {
    const store = useStore()
    const ruleFormRef = ref<FormInstance>()
    const title = { add: '新增', update: '编辑', read: '查看' }
    // 关闭弹框事件回调
    const handleCloseModal = () => {
      emit('cancel')
    }
    return () => {
      const { type, visible } = props
      const optionsValidateForm = reactive<SystemParamDataItemType>(Object.assign({}, props.record))
      // 提交表单
      const handleSubmitForm = () => {
        if (!ruleFormRef.value) return
        ruleFormRef.value.validate(async (valid) => {
          if (!valid) return
          const params = { ...optionsValidateForm }
          const res = await store.dispatch(
            type === 'add' ? 'systemParam/AddSystemParamInfo' : 'systemParam/UpdateSystemParamInfo',
            params
          )
          if (res?.code === 200) {
            ElMessage({ type: 'success', message: '操作成功' })
            handleCloseModal()
          }
        })
      }

      return (
        <ElDialog
          title={(title[type] as string) || '查看'}
          modelValue={visible}
          closeOnClickModal={false} // 点遮罩层不关弹窗
          draggable // 可拖拽
          beforeClose={handleCloseModal}
          v-slots={
            type !== 'read' && {
              footer: () => (
                <>
                  <ElButton type="primary" onClick={handleSubmitForm}>
                    <ElIcon>
                      <EditPen />
                    </ElIcon>
                    &nbsp; {type === 'add' ? '保存' : '修改'}
                  </ElButton>
                  <ElButton onClick={handleCloseModal}>取消</ElButton>
                </>
              )
            }
          }
        >
          <ElForm label-width="100px" ref={ruleFormRef} model={optionsValidateForm}>
            <ElRow gutter={GUTTER}>
              <ElCol {...SPAN_STYLE_DOUBLE}>
                <ElFormItem
                  prop="paramName"
                  label="参数名称"
                  rules={[{ required: true, message: '请输入参数名称' }]}
                >
                  {type === 'read' ? (
                    optionsValidateForm.paramName
                  ) : (
                    <ElInput v-model={optionsValidateForm.paramName} placeholder="请输入参数名称" />
                  )}
                </ElFormItem>
              </ElCol>
              <ElCol {...SPAN_STYLE_DOUBLE}>
                <ElFormItem
                  prop="paramKey"
                  label="参数键名"
                  rules={[{ required: true, message: '请输入参数键名' }]}
                >
                  {type === 'read' ? (
                    optionsValidateForm.paramKey
                  ) : (
                    <ElInput v-model={optionsValidateForm.paramKey} placeholder="请输入参数键名" />
                  )}
                </ElFormItem>
              </ElCol>
              <ElCol {...SPAN_STYLE_DOUBLE}>
                <ElFormItem
                  prop="paramValue"
                  label="参数键值"
                  rules={[{ required: true, message: '请输入参数键值' }]}
                >
                  {type === 'read' ? (
                    optionsValidateForm.paramValue
                  ) : (
                    <ElInput
                      v-model={optionsValidateForm.paramValue}
                      placeholder="请输入参数键值"
                    />
                  )}
                </ElFormItem>
              </ElCol>
            </ElRow>
          </ElForm>
        </ElDialog>
      )
    }
  }
})
